<template>
  <div class="inputGroup">
    <!-- 组件结构 -->
    <div class="input">
      <input :type="type" :value="value" :placeholder="placeholder" :name="name" :error="error" @input="$emit('input',$event.target.value)" :class="{'is_border':error}">
      <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">{{btnTitle}}</button>
      <div v-if="error" class="invalid-feedback">{{error}}</div>
    </div>

  </div>
</template>
<script>
export default {
  name: 'inputGroup',
  props: {
    type: {
      type: String,
      default: "text"
    },
    value: String,
    placeholder: String,
    name: String,
    btnTitle: String,
    disabled: Boolean,
    error: String
  },

  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  },
}
</script>
<style  scoped>
.inputGroup {
  position: relative;
  height: 100%;
  margin-top: 0.5rem;
}
.input {
  position: relative;
}
.input input {
  width: 6.75rem;
  height: 1rem;
  line-height: 1.075rem;
  outline: none;
  border: 0.05rem #ccc solid;
  border-radius: 0.2475rem;
  color: rgb(88, 90, 90);
  padding: 0 0.5125rem;
  font-size: 0.375rem;
}
.input button {
  position: absolute;
  top: 0.3475rem;
  right: 1.5rem;
  height: 0.6rem;
  background-color: #fff;
  outline: none;
  border: none;
  font-size: 0.35rem;
}
.invalid-feedback {
  text-align: left;
  margin-left: 1.15rem;
  color: red;
  padding-top: 0.225rem;
  font-size: 0.25rem;
}
.is_border {
  border: 0.05rem rgb(250, 36, 36) solid !important;
}
</style>
